<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>

	<link rel="stylesheet" type="text/css" href="/js/bootstrap-fileinput/css/fileinput.min.css"/>
	<script type="text/javascript" src="/js/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="/js/bootstrap-fileinput/js/locales/zh.js"></script>

    
    
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select id="one" onchange="selectTwo()" class="form-control" >
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select id="two" onchange="selectThree()" class="form-control select-sm" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select id="three" onchange="cat()" class="form-control select-sm" ></select>
		                              			</td>
		                              			<td id="cat">

		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="goodsName"    placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" id="brandList" ></select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" id="caption" class="form-control"   placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" id="price"  placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="content" id="introduction" style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4" id="packageList"  class="form-control"   placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4" id="saleService"  class="form-control"    placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table  class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
											</tr>
							            </thead>
					                    <tbody id="tb">

					                    </tbody>
								 </table> 
								  <input type="hidden" id="imageUrl">
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type">                                
	                                <table id="custom">

									</table>
                                </div>
                            </div>

							<!--规格-->
							<div class="tab-pane" id="spec">
								<div class="row data-type">
									<div class="col-md-2 title">是否启用规格</div>
									<div class="col-md-10 data">
										<input type="checkbox" >
									</div>
								</div>
								<p>

								<div>

									<div id="specsShow" class="row data-type">

<!--										<div name="specificationName">-->
<!--											<div class="col-md-2 title">屏幕尺寸</div>-->
<!--											<div class="col-md-10 data">-->
<!--					                               -->
<!--					                            <span>-->
<!--					                            	<input  type="checkbox" >4.0					                            				                            	-->
<!--					                            </span>-->
<!--												<span>-->
<!--					                            	<input  type="checkbox" >4.5					                            				                            	-->
<!--					                            </span>-->
<!--												<span>-->
<!--					                            	<input  type="checkbox" >5.0					                            				                            	-->
<!--					                            </span>-->

<!--											</div>-->
<!--										</div>-->

									</div>


	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>					                          
												    <th  id="th1" class="sorting">屏幕尺寸</th>
													<th  id="th2" class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody id="specAdd">
						                      <tr>					                           
										            <td>4.0</td>
													<td>3G</td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
										            <td>4.0</td>
													<td>4G</td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>5.0</td>
													<td>3G</td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>5.0</td>
													<td>4G</td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="addGood()"><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input id="color" class="form-control" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
								<input type="file" id="myFile" name="myFile"/>
					            </td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" onclick="baoCunImage()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
<script>
	function addGood(){
		var a = $("#cat").html();
		var s = a.split(">")
		var v = s[1].split("<")
		var i = v[0]
		var newArr = []
		var newOption = $("#custom").find("tr") //获取整个表格的tr
		$(newOption).each(function (i,e){  //循环tr
			var td = $(e).find("td"); //td = tr中的td
			var newPP = $(td[0]).text()
			var newName = $(td[1]).find("input").val();
			var options = {text:newPP,value:newName};//按照json对象的方式进行赋值
			newArr.push(options);//添加到数组
		})
		var newJson = JSON.stringify(newArr);//将json转换成字符串进行传值
		//图片 /----------------------------------------------------------------------------------------------------------------------
		var imgArr = []
		var img = $("#tb").find("tr")
		$(img).each(function (i,e){
			var td = $(e).find("td")
			var newI = $(td[0]).text()
			var newM = $(td[1]).find("img").attr("src")
			var newImg = {color:newI,url:newM}
			imgArr.push(newImg)
		})
		var imgString = JSON.stringify(imgArr)
		//---------------------------------------------------------------------------------------------------------------------------
		var th1 = $("#th1").text()
		var th2 = $("#th2").text()
		var specTrs = $("#specAdd").find("tr");
		var specArr = []
		$(specTrs).each(function (i,e){
			var td = $(e).find("td")
			var b = $(td[0]).text();
			var p = $(td[1]).text();
			var j = $(td[2]).find("input").val()
			var k = $(td[3]).find("input").val()
			var spec = {text:th1,value:th2,p:b,w:p,price:j,k:k}
			specArr.push(spec)
		})
		//---------------------------------------------------------------------------
		var name = $("#goodsName").val()
		var arr = []
		$(specArr).each(function (i,e){
			var ss = {title:name + " " + e.text + ":" + e.p + " " + e.value + ":" + e.w,price:e.price,num:e.k,
				categoryid:$("#three").val(),category:$("#three").find("option:selected").text(),brand:$("#brandList").find("option:selected").text(),
				spec:'{' + '"'  + e.text + '"' + ':' + '"' + e.p + '"' + ',' + '"' + e.value + '"' + ':' + '"' +  e.w + '"' + '}'}
			arr.push(ss)
		})
		var ddd = JSON.stringify(arr)
		$.ajax({
			url: "/goods/addGoods",
			data: {saleService:$("#saleService").val(),packageList:$("#packageList").val(),price:$("#price").val()
				,caption:$("#caption").val(),goodsName:$("#goodsName").val(),category1Id:$("#one").val(),category2Id:$("#two").val()
				,category3Id:$("#three").val(),brandId:$("#brandList").val(),typeTemplateId:i,introduction:editor.html()
				,customAttributeItems:newJson,itemImages:imgString,itemString:ddd
			},
			type: "get",
			dataType: "json",
			async: false,
			success: function (result) {
				if (result.code == "666") {
					alert(result.message)
					window.location.reload();
				} else {
					alert(result.message)
				}

			}
		})
	}
</script>
            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

</script>
       
</body>
</html>
<script>
	$(function (){
		selectOne()
		//文件上传
		$('#myFile').fileinput({//获取input的id
			language: 'zh',//需要依赖和插件
			uploadUrl: "/goods/upload",//上传路径
			showCaption: true,
			showUpload: true,
			showRemove: true,
			showClose: true,
			allowedFileExtensions: ['jpg', 'png', 'gif', 'jfif', 'txt', 'pdf', 'xls', 'xlsx'],//可以上传的文件后缀名
			maxFileSize: 40960, //设置文件上传单位kb
			maxFileCount: 5, //最大上传数量
			browseClass: 'btn btn-primary', //按钮样式
			entryType: "multipart/form-data",//文件上传
		});
		//上传时，name属性回填给文本框赋值，添加到数据库中
		//上传成功后的回调方法
		$('#myFile').on('fileuploaded', function (event, data, previewId, index) {
			// console.log(data)
			if (data.response.code == 666){
				$("#imageUrl").val(data.response.data);//data.response就是返回的信息，data是里面的值
			}
		})
	})
	//增加图片
	function baoCunImage(){
		var color = $("#color").val();
		var url =$("#imageUrl").val();
		var html = '';
		html += ' <tr>'
		html += '<td align="center">'+color+'</td>'
		html += '<td><img  src="'+url+'" width="100px" height="100px"></td>'
		html += '<td> <button type="button" class="btn btn-default" onclick="deleteRow(this)" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>'
		html += '</tr>'
		$("#tb").append(html);
		//再次点击增加是时   数据为空
		$(".fileinput-remove-button").click();
		$("#color").val("");
	}
	//删除图片
	function  deleteRow(now){
		$(now).parent().parent().remove();  //删除父级的父级 tr;
	}

	function selectOne(){
		$.ajax({
			url: "/goods/select",
			data: {id:0},
			type: "get",
			dataType: "json",
			async: false,
			success: function (result) {
				var html = '<option>请选择</option>'
				if (result.code == "666") {
					var cats = result.data;
					for (var i = 0; i < cats.length; i++) {
						html += '<option value="'+ cats[i].id +'">'
						html += cats[i].name
						html += '</option>'
					}
					$("#one").html(html)
					$("#two").html('<option>请选择</option>')
					$("#brandList").html('<option>请选择</option>')
					$("#cat").html('模板Id')
				} else {
					alert(result.message)
				}

			}
		})
	}
	function selectTwo(){
		var id = $("#one").val()
		$.ajax({
			url: "/goods/select",
			data: {id:id},
			type: "get",
			dataType: "json",
			async: false,
			success: function (result) {
				var html = '<option>请选择</option>'
				if (result.code == "666") {
					var cats = result.data;
					for (var i = 0; i < cats.length; i++) {
						html += '<option value="'+ cats[i].id +'">'
						html += cats[i].name
						html += '</option>'
					}
					$("#two").html(html)
					$("#three").html('<option>请选择</option>')
					$("#brandList").html('<option>请选择</option>')
					$("#cat").html('模板Id')
				} else {
					alert(result.message)
				}

			}
		})
	}
	function selectThree(){
		var id = $("#two").val()
		$.ajax({
			url: "/goods/select",
			data: {id:id},
			type: "get",
			dataType: "json",
			async: false,
			success: function (result) {
				var html = '<option>请选择</option>'
				if (result.code == "666") {
					var cats = result.data;
					for (var i = 0; i < cats.length; i++) {
						html += '<option value="'+ cats[i].id +'">'
						html += cats[i].name
						html += '</option>'
					}
					$("#three").html(html)
					$("#brandList").html('<option>请选择</option>')
				} else {
					alert(result.message)
				}

			}
		})
	}
	function cat(){
		var id = $("#three").val()
		$.ajax({
			url: "/goods/selectId",
			data: {id:id},
			type: "get",
			dataType: "json",
			async: false,
			success: function (result) {
				var html = ''
				if (result.code == "666") {
					var cat = result.data;
					html += '模板ID:'
					html += '<span id="brandId">'+ cat.typeId +'</span>'
					$("#cat").html(html)
				} else {
					alert(result.message)
				}

			}
		})
		selectBrand()
	}
	function selectBrand(){
		var id = $("#brandId").html()
		$.ajax({
			url: "/goods/selectBrand",
			data: {id:id},
			type: "get",
			dataType: "json",
			async: false,
			success: function (result) {
				var html = '<option>请选择</option>'
				if (result.code == "666") {
					var cats = result.data.brandIds;
					var brandList = JSON.parse(cats)
					for (var i = 0; i < brandList.length; i++) {
						html += '<option value="'+ brandList[i].id +'">'
						html += brandList[i].text
						html += '</option>'
					}
					$("#brandList").html(html)
				} else {
					alert(result.message)
				}

			}
		})
		getCustom()
	}
	function getCustom(){
		var id = $("#brandId").html()
		$.ajax({
			url: "/goods/selectBrand",
			data: {id:id},
			type: "get",
			dataType: "json",
			async: false,
			success: function (result) {
				var html = ''
				if (result.code == "666") {
					var brands = result.data.customAttributeItems;
					var brandList = JSON.parse(brands)
					for (var i = 0; i < brandList.length; i++) {
						html += '<tr>'
						html += '<td>'+ brandList[i].text +'</td>'
						html += '<td><input className="form-control" placeholder="属性名称"></td>'
						html += '</tr>'
					}
					$("#custom").html(html)
				} else {
					alert(result.message)
				}
			}
		})
		getSpec()
	}
	function getSpec(){
		var id = $("#brandId").html()
		$.ajax({
			url: "/goods/selectTemplateVo",
			data: {id:id},
			type: "get",
			dataType: "json",
			async: false,
			success: function (result) {
				var html = ''
				if (result.code == "666") {
					var specs = result.data.specVOList;
					$(specs).each(function (i,e){
						html +='<div name="specificationName">'
						html +='<div class="col-md-2 title">' + e.text + '</div>'
						html +='<div class="col-md-10 data">'
						var opList = e.optionList
						$(opList).each(function (j,o){
							html +='<span>'
							html +='<input type="checkbox" value="' + o.id + '">' + o.optionName + ''
							html +='</span>'
						})
						html +='</div>'
						html +='</div>'
					})
					$("#specsShow").html(html)
				} else {
					alert(result.message)
				}
			}
		})
	}


</script>